<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title>Astronomy 101</title>
		<script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
		<script src="scripts/scripts.js" language="javascript"></script>
        <script src="scripts/quiz1.js" language="javascript"></script>
		<link href="styles/styles.css" rel="stylesheet" type="text/css"/>
	</head>
    <body onload="javascript:visitPage16()">
    <nav>
    <center><img src="images/headeer.png" width="820" height="124" alt="header"></center>
  <div align="center" id="navi">
  <ul>
		<li><a href="introduction.html">Introduction</a></li>
		<li><a href="#">Planets</a>
			<ul>
				<li><a href="mercury.html" class="menu-link">Mercury</a></li>
                <li><a href="venus.html" class="menu-link">Venus</a></li>
				<li><a href="earth.html" class="menu-link">Earth</a></li>
				<li><a href="mars.html" class="menu-link">Mars</a></li>
                <li><a href="jupiter.html" class="menu-link">Jupiter</a></li>
                <li><a href="saturn.html" class="menu-link">Saturn</a></li>
                <li><a href="uranus.html" class="menu-link">Uranus</a></li>
                <li><a href="neptune.html" class="menu-link">Neptune</a></li>
			</ul>
		</li>
		<li><a href="#">Comets</a>
			<ul>
				<li><a href="comet-facts.html" class="menu-link">Comet Facts</a></li>
                 <li><a href="comet-period.html" class="menu-link">Comet's Period</a></li>
				 <li><a href="famous-comets.html" class="menu-link">Famous Comets</a></li>
                 <li><a href="comet-mission.html" class="menu-link">Comet's Missions</a></li>
                 
			</ul>
		</li>
		<li><a href="#">Asteroids</a>
        	<ul>
                <li><a href="asteroid-facts.html" class="menu-link">Asteroid Facts </a></li>
				<li><a href="asteroid-mining.html" class="menu-link">Asteroid Mining </a></li>
             </ul>
         </li>
        <li><a href="activity.html" class="menu-link" >Activity</a></li>
         <li id="test-link"><a href="assessment.html">Assessment</a></li>
	</ul>
    </div>
</nav>
<center> <img src="images/activity-header.png" alt= "activity header" title="This is the page header for Activity."/> </center>
    <article>
    
    <header>
            	<h2>Drag and Drop Activity</h2>
            </header>
				
				<section>
         		<form name="dd1" onsubmit="javascript:processForm(); return false;">  
				<p>Let's match the components with the pictures.</p>
				
				<div class="column">
				  <h3>Draggers</h3>
				  <div id="d1" value="0" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )">
			      <p> Saturn</p></div><br/>  
				     	<div id="d2" value="1" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )">
				     	  <p>Crater</p></div><br/>                        
				 		<div id="d3" value="2" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )">
				 		  <p>Jupiter</p>
				 		</div><br/>  
					 	<div id="d4" value="3" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )">
					 	  <p>Mercury</p>
					 	</div><br/>  
                        <div id="d5" value="4" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )">
                          <p>Comet</p></div><br/> 
                        <div id="d6" value="5" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )">
                          <p>Earth</p></div><br/>
				</div>
				
				    
				<div class="column">
						<h3>Dragger Bays</h3>
						<img src="images/saturn-drag.png" width="100" height="100">
				  <div id="db1" value="0" class="draggerbay" 
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>&nbsp;</p></div>
                                                         
				  <img src="images/jupiter-drag.png" width="100" height="100"><br/>                        
		 		  <div id="db2" value="2" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>&nbsp;</p></div>
				 		<img src="images/impact-crater-drag.png" alt="" width="100" height="100"><br/>  
			 	  <div id="db3" value="1" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )">
			 	    <p>&nbsp;</p></div>
				 
				</div>
                <div class="column">
						<h3>Dragger Bays</h3>
						
					 	<img src="images/comet-drag.png" alt="" width="100" height="100"><br/> 
			 	  <div id="db4" value="4" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )">
			 	  <p>&nbsp;</p></div>
                  	<img src="images/mercury-drag.jpg" alt="" width="100" height="100"><br/> 
			 	  <div id="db5" value="3" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )">
			 	  <p>&nbsp;</p></div>
					 	<img src="images/earth-drag.png" alt="" width="100" height="100"><br/>  
                  <div id="db6" value="5" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>&nbsp;</p></div><br/>  
				</div>
				<p id="response">
				  <input type="submit" name="button" value="Submit Your Answer"/>
				  <br/>
			  </p>
         		</form>
          </section>
          <aside id="aside-info">
				<header>
					<p id="aside-title-audio">Audio</p>
				</header>
				<audio id="narration" controls autoplay="autoplay">
					<source src="audio/activity.mp3" type="audio/mp3">
					<source src="audio/activity.ogg" type="audio/ogg">
					Your browser does not support the audio tag.
				</audio>
				<br/>
                </aside>
                <aside id="aside-info2">
			   <header>
					<p id="aside-title-transcript">Transcript</p>
				</header>
			   <div id="transcript">
			
            <p>Here is a quiz about objects in our solar system.  Can you match the picture of the object with its correct name? Drag the name to the correct picture.</p>
			  </div>
	    </aside>
        </article>
        <br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
        
<hr size=2>

	<footer>
			<center><em>
				<a href="references.html">References
				</a>
			</em>
			<cite>&copy; 2013. All Rights Reserved.</cite></center>
	</footer>
        </body>
</html>
    
	</article>
	</body>
</html>
	